import React, { FC } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import RootPageComponent from '@/pages/components/RootPageComponent/RootPageComponent';
import PayHead from './PayHead/PayHead';
import PayPageCotent from './PayPageCotent/PayPageCotent';
import Taro, { useRouter } from '@tarojs/taro';
import { Button } from 'antd-mobile';
import { usePayList, changePayStatus } from './PayPageCotent/usePayList';
import { apiPostCreatAndCheckoutOrder } from '@/pages/_server/_api/ApiOrder/apiPostCreatAndCheckoutOrder';
export interface IProps extends ICompProps {}
PayPage.defaultProps = {} as Partial<IProps>;
function PayPage(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('PayPage', className);
    const route = useRouter();
    const {price,id} = route.params;
    const { paylistArr, setPayListArr, disCountCode,
        setDisCountCode, } = usePayList();
    const handlePay = async()=>{
        const payMethods = paylistArr.find(item=>item.isChecked).val;
        let res = await apiPostCreatAndCheckoutOrder({"goodsId": id,
        "paymentMethod": payMethods});
        if (!res) return;
         Taro.showToast({
            title: res.message,
            icon: 'none',
        });
        Taro.navigateTo({
            url: 'pages/MyOrder/MyOrder',
        });
        console.log('支付方式',payMethods);
        console.log('goodsId',id);
        console.log('折扣码',disCountCode);
    };
    return (
        <RootView className={localClassName} style={style}>
            <RootPageComponent enableExpand={false} leftTitle="订单支付">
                <PayHead money={price}></PayHead>
                <PayPageCotent paylistArr={paylistArr} setPayListArr={setPayListArr}  disCountCode={disCountCode}
        setDisCountCode={setDisCountCode}></PayPageCotent>
                <Button
                    block
                    shape="rounded"
                    className="button"
                    onClick={handlePay}>
                    确认支付
                </Button>
            </RootPageComponent>
        </RootView>
    );
}
export default React.memo(PayPage as FC<IProps>);
const RootView = styled(View)`
    &.PayPage {
        .button {
            --background-color: #ff8828;
            --text-color: #ffffff;
            width: 520px;
            height: 90px;
            font-size: 32px;
            font-weight: 400;
            position: absolute;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
        }
    }
`;
